import React from 'react'
import PropTypes from 'prop-types'
import { TabBar } from 'antd-mobile'
import withRouter from '../withRouter'
import {connect} from 'react-redux'

@withRouter
@connect(
    state => state.chat
)
class NavLinkBar extends React.Component {
    static propTypes = {
       data: PropTypes.array.isRequired
    }
    render(h) {
        // console.log(this.props)
        const navList = this.props.data.filter(v => !v.hide),
                { pathname } = this.props.location
        return (
            <div>
                <TabBar>
                    {navList.map(v => (
                        <TabBar.Item
                            badge={v.path === '/msg'?this.props.unread:0}
                            key={v.path}
                            title={v.text}
                            icon={{uri: require(`./img/${v.icon}.png`)}}
                            selectedIcon={{uri: require(`./img/${v.icon}-active.png`)}}
                            selected={pathname===v.path}
                            onPress={()=>{
                                // this.props.history.
                                this.props.navigate(v.path)
                            }}
                        >

                        </TabBar.Item>
                    ))}
                </TabBar>
            </div>
        )
    }
}

export default NavLinkBar